<template>
  <el-col style="margin: 10px auto;max-width: calc(100vw - 210px);">
    <div style="margin-top: 50px;"></div>
    <div style="min-height: 20%">
      <el-card style="border-radius: 20px">
        <el-button type="primary" @click="dialogVisible=true">筛选人才</el-button>
      </el-card>
      <el-card style="border-radius: 20px;margin-top: 10px;max-height: 540px">
        <el-table
            :data="ResumeList"
            style="border-radius: 15px"
            height="530"
        >
          <el-table-column prop="resumename" label="姓名"/>
          <el-table-column prop="gender" label="性别"/>
          <el-table-column prop="age" label="年龄" sortable/>
          <el-table-column prop="salarye" label="期望薪资" sortable/>
          <el-table-column prop="salaryn" label="目前薪资" sortable/>
          <el-table-column prop="inde" label="期望行业"/>
          <el-table-column prop="rstate" label="人才状态"
                           :filters="[
                               {text:'待初筛',value:'新增'},
                               {text:'已初筛',value:'初筛'},
                               {text:'已推荐',value:'推荐'},
                               {text:'已初试',value:'初试'},
                               {text:'已复试',value:'复试'},
                               {text:'已终试',value:'终试'},
                               {text:'已offer',value:'offer'},
                               {text:'已入职',value:'入职'},
                               {text:'已过保',value:'过保'},
                               {text:'已淘汰',value:'淘汰'},
                           ]"
                           :filter-method="select"
          >
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <el-button link type="primary">预览简历</el-button>
          </el-table-column>
        </el-table>
      </el-card>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,15,20]"
          :page-size="pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="total">
      </el-pagination>
    </div>

  </el-col>


  <el-dialog
      v-model="dialogVisible"
      title="搜索人才"
  >
    <span>
      <el-form label-width="120px">
        <el-form-item label="模糊搜索词">
          <el-input v-model="keyWords"/>
        </el-form-item>
       <el-form-item label="性别">
        <el-select v-model="searchGender">
          <el-option label="男" value="男"/>
          <el-option label="女" value="女"/>
        </el-select>
        </el-form-item>
        <el-form-item label="年龄范围">
          <el-input v-model="ageBottom" style="width: 49%;"></el-input>
            <div style="width: 2%;">~</div>
          <el-input v-model="ageTop" style="width: 49%;"></el-input>
        </el-form-item>
        <el-row>
        <el-form-item label="期望薪资(最低)" style="width: 50%;">
          <el-input v-model="searchSalarye">
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="当前薪资(最低)" style="width: 50%;">
          <el-input v-model="searchSalaryn">
            <template #append>元</template>
          </el-input>
        </el-form-item>
        </el-row>
          <el-form-item label="期望行业">
            <el-input v-model="industryExp" clearable/>
          </el-form-item>
      </el-form>


    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="load"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {ref} from 'vue'
import request from "@/utils/request";

export default {
  name: "Resume",
  components: {},
  data() {
    return {
      t1: "primary",
      t2: "default",
      t3: "default",
      t4: "default",
      option1: [
        {
          value: "北京市",
          label: "北京市",
        }, {
          value: "天津市",
          label: "天津市",
        }, {
          value: "河北省",
          label: "河北省",
        }, {
          value: "山西省",
          label: "山西省",

        }, {
          value: "内蒙古自治区",
          label: "内蒙古自治区",

        }, {
          value: "辽宁省",
          label: "辽宁省",

        }, {
          value: "吉林省",
          label: "吉林省",

        }, {
          value: "黑龙江省",
          label: "黑龙江省",

        }, {
          value: "上海市",
          label: "上海市",

        }, {
          value: "江苏省",
          label: "江苏省",

        }, {
          value: "浙江省",
          label: "浙江省",

        }, {
          value: "安徽省",
          label: "安徽省",

        }, {
          value: "福建省",
          label: "福建省",

        }, {
          value: "江西省",
          label: "江西省",

        }, {
          value: "山东省",
          label: "山东省",

        }, {
          value: "河南省",
          label: "河南省",

        }, {
          value: "湖北省",
          label: "湖北省",

        }, {
          value: "湖南省",
          label: "湖南省",

        }, {
          value: "广东省",
          label: "广东省",

        }, {
          value: "广西壮族自治区",
          label: "广西壮族自治区",

        }, {
          value: "海南省",
          label: "海南省",

        }, {
          value: "重庆市",
          label: "重庆市",

        }, {
          value: "四川省",
          label: "四川省",

        }, {
          value: "贵州省",
          label: "贵州省",

        }, {
          value: "云南省",
          label: "云南省",

        }, {
          value: "西藏自治区",
          label: "西藏自治区",

        }, {
          value: "陕西省",
          label: "陕西省",

        }, {
          value: "甘肃省",
          label: "甘肃省",

        }, {
          value: "青海省",
          label: "青海省",

        }, {
          value: "宁夏回族自治区",
          label: "宁夏回族自治区",

        }, {
          value: "新疆维吾尔族自治区",
          label: "新疆维吾尔族自治区",

        }, {
          value: "香港特别行政区",
          label: "香港特别行政区",

        }, {
          value: "澳门特别行政区",
          label: "澳门特别行政区",

        }, {
          value: "台湾省",
          label: "台湾省",

        }

      ],
      ResumeList: [],
      keyWords: "",
      dialogVisible: false,
      searchGender: "",
      ageBottom: null,
      ageTop: null,
      searchSalarye: null,
      searchSalaryn: null,
      industryExp: null,


      allSelect: "",
      form:{},
      currentPage:1,
      pageSize:10,
      total:0,

    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get("/resume/search",{
        params:{
          pageNumber:this.currentPage,
          pageSize:this.pageSize,
          keyWord:this.keyWords,
          gender:this.searchGender,
          ageBottom:this.ageBottom,
          ageTop:this.ageTop,
          salarye:this.searchSalarye,
          salaryn:this.searchSalaryn,
          inde:this.industryExp
        }
      }).then(res=>{
        console.log(res)
        if(res.code==='0'){
          this.ResumeList=res.data.records
          this.total=res.data.total
        }
      })
      this.dialogVisible = false
    },

    bt1() {
      this.t1 = "primary"
      this.t2 = "default"
      this.t3 = "default"
      this.t4 = "default"
    },
    bt2() {
      this.t2 = "primary"
      this.t1 = "default"
      this.t3 = "default"
      this.t4 = "default"
    },
    bt3() {
      this.t3 = "primary"
      this.t2 = "default"
      this.t1 = "default"
      this.t4 = "default"
    },
    bt4() {
      this.t4 = "primary"
      this.t2 = "default"
      this.t3 = "default"
      this.t1 = "default"
    },
    select(){
      this.$message({
        type:"error",
        message:"阿哲"
      })
    },
    handleSizeChange(val){
      this.pageSize=val
      this.load()
    },
    handleCurrentChange(val){
      this.currentPage=val
      this.load()
    },
  },
}
</script>

<style scoped>


</style>